<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "vue-i18n";

type Prop = {
  title?: string;
  content?: string;
  deleteMention?: boolean;
};
const props = defineProps<Prop>();
const emit = defineEmits(["confirm", "cancel"]);
const { t } = useI18n();

const cTitle = computed(() => {
  if (!props.title && props.deleteMention) {
    return t("commons.message_box.deleteConfirm") + "?";
  }
  return props.title;
});

const onConfirm = () => {
  emit("confirm");
};
const onCancel = () => {
  emit("cancel");
};
</script>

<template>
  <el-popconfirm
    :title="cTitle"
    :confirmButtonText="t('commons.button.confirm')"
    :cancelButtonText="t('commons.button.cancel')"
    @confirm="onConfirm"
    @cancel="onCancel"
  >
    <template #reference>
      <el-button v-bind="$attrs" />
    </template>
  </el-popconfirm>
</template>
<style lang="scss" scoped></style>
